<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css动画</title>

    <style>
        html,body{
            height: 100%;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: orangered;
        }

        div:hover{
            width: 200px;
            height: 200px;
        }

        div:active{
            /*animation-name: 设置执行的动画. 属性值是动画的名称. */
            animation-name: roy;

            /*animation-duration设置动画持续时间.*/
            animation-duration: 2s;

            /*设置缓动函数*/
            animation-timing-function: linear;

            /*设置重复次数, infinite: 无限次.*/
            animation-iteration-count: infinite;

            /*设置动画延迟时间.*/
            /*animation-delay: 2s;*/

            /*
                设置动画结束时的状态模式.
                forwards: 保留最后一帧.
                both: 保留开始和结束状态.
            */
            /*animation-fill-mode: both;*/

            /*控制动画方向.
            normal: 正常方向.一次性的.
            alternater: 有来有回.
            */
            animation-direction: alternate;

            /*设置动画的播放状态.
            running: 播放动画.
            paused:暂停动画.*/
            /*animation-play-state: paused;*/
        }

        /*@keyframes定义一个关键帧动画*/
        @keyframes roy{
            0%{
                width: 251px;
                height: 251px;
            }

            50%{
                width: 300px;
                height: 300px;
            }

            100%{
                width: 350px;
                height: 350px;
            }
        }
    </style>
</head>
<body>
    <div>
        
    </div>
</body>
</html>